<?php
/**
 * 计划
 * @author liuzilu <fotomxq@gmail.com>
 * @version 1
 * @package stock
 */
//引用全局
require('glob.php');
//当前所属页面名称
$nowPageName = 'plan';
?>

<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>计划 - <?php echo $webData['WEB-TITLE']; ?></title>
        <link rel="shortcut icon" href="../assets/imgs/logo.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="../assets/imgs/logo.png">
        <link rel="stylesheet" href="../assets/css/uikit.min.css">
        <link rel="stylesheet" href="../assets/css/components/notify.min.css">
        <link rel="stylesheet" href="assets/css/glob.css">
        <link rel="stylesheet" href="assets/css/index.css">
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

        <?php require('page-menu.php'); ?>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>计划</h2>
                    <p>设定总收益计划和周期性目标。</p>
                </div>
            </div>
            
            <hr>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>预期收益 (月)</h2>
                    <canvas id="stockMChart" width="900" height="200"></canvas>
                </div>
            </div>

            <hr>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <form class="uk-form" data-uk-margin="">
                        <table class="uk-table uk-table-hover" id="stock-table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>预期收益</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php for($i=0;$i<13;$i++){ ?>
                                <tr>
                                    <td><?php echo $i; ?>月</td>
                                    <td>
                                        <div class="uk-form-icon">
                                            <i class="uk-icon-money"></i>
                                            <input type="text" id="set-<?php echo $i; ?>">%
                                        </div>
                                    </td>
                                    <td><a class="uk-button" href="#set">设定</a></td>
                                </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>

        </div>

        <script src="../assets/js/jquery.min.js"></script>
        <script src="../assets/js/uikit.min.js"></script>
        <script src="../assets/js/components/notify.min.js"></script>
        <script src="../assets/js/chart.min.js"></script>
        <script>
            $(function () {
                //日统计表设定
                $('#stockMChart').width($('#stockMChart').parent().width());
                var chartMdata = {
                    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                    datasets: [
                        {
                            fillColor: "rgba(220,220,220,0.5)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            data: [0, 2.3, 15, 13.4, 15]
                        }
                    ]
                }
                var chartMx = $("#stockMChart").get(0).getContext("2d");
                var stockMChart = new Chart(chartMx);
                new Chart(chartMx).Line(chartMdata, {
                    bezierCurve: false,
                    scaleShowLabels: true,
                    scaleLabel:'<%=value%>%'
                });
            });
        </script>

    </body>
</html>